import React from 'react'
import './index.scss'
import { observer, inject } from 'mobx-react';
import { getBookrack } from './../../utils/api';
import creatHistory from 'history/createHashHistory' 
import { Menu } from 'element-react'

@inject('store')
@observer
class Bookrack extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            topnav: '连载中',
            title:'玄幻_奇幻',
            all: {},
            error:"https://img22.aixdzs.com/nopic2.jpg"
        }
    }
    componentDidMount() {
        let { getBookcategory} = this.props.store.bookrack
        getBookrack().then(res => {
            let category = res.data[0]
            this.setState({
                all:category
            })
            let arr = []
            for (var i in category) {
                arr.push(i)
            }
            arr.reverse()
            getBookcategory(arr)
             /* 初始显示哪一个 */
            this.navleft(this.state.title)
        })
    }

    navtop(item,top) {
        if (top === 'top1') {
            this.refs.top1.style.borderBottomColor = '#b93321'
            this.refs.top1.style.color = '#ee4745'
            this.refs.top2.style.borderBottomColor = '#eef1f6'
            this.refs.top2.style.color = '#8a8a8f'
        } else {
            this.refs.top2.style.borderBottomColor = '#b93321'
            this.refs.top2.style.color = '#ee4745'
            this.refs.top1.style.borderBottomColor = '#eef1f6'
            this.refs.top1.style.color = '#8a8a8f'
        }
        let all = this.state.all
        let topnav = item
        this.setState({
            topnav:item
        })
        let title = this.state.title
        let arr=all[title][topnav]
        this.content(arr)
    }
    navleft(item) {
        let all = this.state.all
        let topnav = this.state.topnav
        let title= item
        this.setState({
            title:item
        })
        let arr = all[title][topnav]
        this.content(arr)
    }
    
    
    content(data) {
        let { getBookall } = this.props.store.bookrack
        console.log(data)
        getBookall(data)
    }

    render() {
        const history = creatHistory()
        let{getbookcategory,getbookall} = this.props.store.bookrack
        return(
            <div className='box'>
                    {/* 头部 */ }
                 <header className = 'bg-red h-4 text-white w-100 flex justify-center align-center px-2' >
                    <i className='iconfont icon-back ' onClick={() => {
                        history.goBack()
                    }}>返回</i>< i className='font-smaller flex-1 text-center' >
                       神马分类</i ><i className='iconfont icon-shujia font-small'></i> <i className='iconfont icon-index ml-1 '></i>
                </header >
                {/* topnav */}
                <div className='flex w-100 text-moun align-center justify-end px-2 font-xiao'style={{height:'0.4rem',background:'#eef1f6',color:'#8a8a8f'}}>
                    <li onClick={this.navtop.bind(this, '连载中', "top1")} className='py-1' ref='top1'
                    style={{borderBottom:'2px solid #b93321',color:"#ee4745"}}
                      >连载中</li>
                    <li onClick={this.navtop.bind(this, "已完结", "top2")} className="mx-5 py-1" ref="top2"
                       style={{borderBottom:'2px solid #eef1f6'}}>已完结</li>
                </div>
                <div className='flex' style={{overflow:"hidden"}}>
                   <div style={{background:'#eef1f6'}}>
                        <Menu defaultActive="1" className="el-menu-vertical-demo">
                            {getbookcategory.map((item, index) => {
                                return (
                                    <div key={index} onClick={
                                        this.navleft.bind(this,item)}>
                                      <Menu.Item index={index+1+''} key={index+1+''}>{item}</Menu.Item>
                                    </div>
                                )
                            })}
                        </Menu>
                    </div>
                    <div style={{height:"5.3rem",overflow:'auto'}}>
                        <ul style={{overflow:'auto'}}>
                            {
                                getbookall.map((item, index) => {
                                    return (
                                        <li key={index} className='flex px-2 align-center py-1' >
                                            <div style={{ width: '0.59rem' }}>
                                                <img src={item.cover.indexOf('img22')!==-1?item.cover:'https://img22.aixdzs.com/'+item.cover} style={{ width: '0.59rem' }}
                                                    
                                                    alt='无图' />
                                        </div>
                                        <div style={{height: '0.74remm'}} className='px-1'>
                                            <h2>{item.title}</h2>
                                            <span className='text-muted font-xiao'>{item.author} <i className='px-1'>|</i>{item.cat}</span>
                                            <p className='overflow-hidden text-muted font-xiao' style={{width:'1.8rem',height:'0.2rem'}}>{item.longIntro}</p>
                                            <div className='font-xiao text-dark'>字数:
                                            <i className='text-red'>{item.wordCount?item.wordCount:'暂未统计'}</i><i className=''>|</i>读者留存:<i className='text-red'>{item.retentionRatio?item.retentionRatio:"0"}%</i></div>
                                         </div>
                                    </li>
                                 )
                             })   
                            }
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}

export default Bookrack